<template>
    <div class="top-bar">
        <div class="wrap t-wrap">
            <div class="l">欢迎来到叩丁狼积分商城</div>
            <div class="r">
                <ul>
                    <li >
                        <img width="26" src="../assets/img/userImg.f8bbec5e.png" alt="">
                        <span>用户名: 游客</span>
                    </li>
                    <li>我的积分</li>
                    <li>获取积分</li>
                    <li>叩丁狼官网</li>
                    <li class="btn" @click="isShow" v-show="isLogined">登录</li>  
                    <li class="cart-btn" v-show="!isLogined">
                        <img src="../assets/img/cart.png" alt="">
                        <span>购物车</span>
                        <b>3</b>
                    </li> 
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>

import { useStore } from 'vuex';

import { ref, computed } from 'vue';
import { toRaw } from '@vue/reactivity';


const store = useStore();

    // 用户点击登录按钮时，触发该函数
    const isShow = () => {
        // console.log('用户点击了登录按钮')

        // 改变状态管理中的isShowLogin的值 通过 store.commit 方法触发状态变更
        store.commit('setShowLogin', true);

    }
    // 登录后修改状态管理中的isLogined的值
    let isLogined = computed(() => toRaw(store.state.loginStatus.isLogined))

</script>

<style lang="less"  scoped>

.top-bar {
    height: 40px;
    background: #242B39;
    line-height: 40px;
    
    .t-wrap {
        display: flex;
        // background: #242369;
        color: #fff;
        font-size: 12px;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        height: 40px;
        line-height: 40px;

            font-size: 14px;
            font-family: SourceHanSansSC;
            font-weight: 300;
            color: #FFFEFE;

        .l {
            display: flex;
            align-items: center;
        }
        .r {
            ul {
                display: flex;
                align-items: center;
                li {
                    margin-left: 20px;
                    cursor: pointer;
                    line-height: 40px;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    &:hover {
                        color: #fff;
                    }
                    margin-left: 20px;
                    img {
                        border-radius: 50%;
                        margin-right: 5px;
                    }
                    &.btn {
                        width: 124px;
                        height: 40px;
                        background: #0A328E;
                        justify-content: center;
                    }
                }
            }
            
        }
    }

    .wrap {
    width: 1200px;
    margin: 0 auto;
}



}

.cart-btn {
    width: 124px;
    height: 40px;
    background-color: #0A328E;
    justify-content: center;
    img {
        margin-right: 10px;
    }
    b {
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 50%;
        text-align: center;
        background-color: #FF0000;
    }
}

</style>